@charset "utf-8";

@import '../../theme.scss';

.x-button {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  width: 100%;
  height: px(90);
  font-size: px(30);
  border-radius: px($smallRadius);
  white-space: nowrap;
  transition: all 0.15s ease-out;
  user-select: none;

  &:active {
    opacity: 1;
  }

  &--capsule {
    border-radius: px(45);
  }

  &--default {
    background: var(--x-default-button-bg-color);
    color: rgb(170, 170, 176);

    &::after {
      content: '';
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      pointer-events: none;
      background: #000;
      opacity: 0;
      border-radius: inherit;
      transition: all 0.2s ease-out;
    }

    &:active {
      &::after {
        opacity: 0.1;
      }
    }

    .x-loading__spin span {
      background: var(--x-primary-color);
    }

    &.x-button--hollow {
      border: px(1) solid var(--x-default-button-border-color);
      background: none;
      color: rgb(170, 170, 176);

      &::after {
        background: var(--x-text-color-o60);
      }

      .x-loading__spin span {
        background: rgb(170, 170, 176);
      }
    }
  }

  &--primary {
    background: linear-gradient(to right, var(--x-primary-color-from), var(--x-primary-color-to));
    color: #fff;

    &::after {
      content: '';
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      pointer-events: none;
      background: #000;
      opacity: 0;
      border-radius: inherit;
      transition: all 0.2s ease-out;
    }

    &:active {
      &::after {
        opacity: 0.2;
      }
    }

    &.x-button--shadow {
      box-shadow: 0 20px 30px -20px rgba(0, 210, 147, 0.8);
    }

    .x-loading__spin span {
      background: #fff;
    }

    &.x-button--hollow {
      border: px(1) solid var(--x-primary-color);
      background: none;
      color: var(--x-primary-color);

      &::after {
        background: var(--x-primary-color);
      }

      .x-loading__spin span {
        background: var(--x-primary-color);
      }
    }
  }

  &--danger {
    background: linear-gradient(to right, var(--x-danger-color-from), var(--x-danger-color-to));
    color: #fff;

    &::after {
      content: '';
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      pointer-events: none;
      background: #000;
      opacity: 0;
      border-radius: inherit;
      transition: all 0.2s ease-out;
    }

    &:active {
      &::after {
        opacity: 0.2;
      }
    }

    .x-loading__spin span {
      background: #fff;
    }

    &.x-button--shadow {
      box-shadow: 0 20px 30px -20px rgba(255, 77, 77, 0.8);
    }

    &.x-button--hollow {
      border: px(1) solid var(--x-danger-color);
      background: none;
      color: var(--x-danger-color);

      &::after {
        background: var(--x-danger-color);
      }

      .x-loading__spin span {
        background: var(--x-danger-color);
      }
    }
  }

  &--lighter {
    background: var(--x-primary-color-lighter);
    color: var(--x-primary-color);

    &::after {
      content: '';
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      pointer-events: none;
      background: var(--x-primary-color);
      opacity: 0;
      border-radius: inherit;
      transition: all 0.2s ease-out;
    }

    &:active {
      &::after {
        opacity: 0.08;
      }
    }

    .x-loading__spin span {
      background: var(--x-primary-color);
    }

    &.x-button--hollow {
      border: px(1) solid var(--x-primary-color);
      background: none;
      color: var(--x-primary-color);

      &::after {
        background: var(--x-primary-color);
      }

      .x-loading__spin span {
        background: var(--x-primary-color);
      }
    }
  }

  &--mini {
    height: px(60);
    font-size: px(26);

    .x-button__loading {
      .x-loading__spin {
        transform: scale(0.75);
        min-width: px(62);
      }
    }
  }

  &--disabled {
    opacity: 0.3;
    pointer-events: none;
    cursor: not-allowed;
  }

  &--loading {
    opacity: 0.8;
    pointer-events: none;
    cursor: not-allowed;

    .x-spin {
      transform: scale(0.828268);
    }
  }

  &--shrink {
    width: auto;
    padding: 0 px(60);

    &.x-button--mini {
      padding: 0 px(30);
    }

    display: inline-flex;
  }
}
